<template>
  <div
    v-if="!loading"
    class="vc-portal-menu"
    :style="style"
  >
    <el-menu
      ellipsis
      mode="horizontal"
    >
      <span v-for="first in dataList" :key="first.id">
        <el-sub-menu
          v-if="first.children && first.children.length > 0"
          :index="first.id"
          :style="currStyle"
          class="first-menu"
        >
          <template #title>
            <div :style="currStyle">{{first.text}}</div>
          </template>
          <span v-for="second in first.children" :key="second.id">
            <el-sub-menu
              v-if="second.children && second.children.length > 0"
              :index="second.id"
            >
              <template #title>{{second.text}}</template>
              <span v-for="third in second.children" :key="third.id">
                <el-sub-menu
                  v-if="third.children && third.children.length > 0"
                  :index="third.id"
                >
                  <template #title>{{third.text}}</template>
                </el-sub-menu>
                <el-menu-item v-else :index="second.id">{{third.text}}</el-menu-item>
              </span>
            </el-sub-menu>
            <el-menu-item v-else :index="second.id">{{second.text}}</el-menu-item>
          </span>
        </el-sub-menu>
        <el-menu-item
          v-else
          :index="first.data.pageId"
        ><div class="first-menu" :style="currStyle">{{first.text}}</div></el-menu-item>
      </span>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue';
import visual from "@/visual/js/visual";
import api from "@/http/api";

const props = defineProps({
  compStyle: Object
});
const dataList = ref([{}]);
const loading = ref(true);

const init = async() => {
  loading.value = true;
  const res = await api.post('/business/menu/portal-tree');
  dataList.value = res.data && res.data.children || [];
  await nextTick(() => loading.value = false);
};

const style = computed(() => {
  const compStyle = props.compStyle || {};
  let result = visual.parseStyle(compStyle);

  if (compStyle['item-width']) {
    result += "--vc-menu-width: " + compStyle['item-width'] + ";";
  }

  if (compStyle['item-height']) {
    result += "--el-menu-item-height: " + compStyle['item-height'] + ";";
    result += "--el-menu-horizontal-height: " + compStyle['item-height'] + ";";
  } else {
    result += "--el-menu-item-height: unset;";
    result += "--el-menu-horizontal-height: unset;";
  }

  if (compStyle['item-split-color']) {
    result += "--vc-menu-split-color: " + compStyle['item-split-color'] + ";";
  }

  return result;
});

const currStyle = computed(() => {
  return visual.parseFontStyle(props.compStyle || {});
});

onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.vc-portal-menu {
  --el-menu-item-height: unset;
  --el-menu-horizontal-height: unset;
  --el-menu-hover-bg-color: var(--vc-menu-hover-bg-color);
  width: 100%;
  :deep(.el-menu) {
    background: transparent !important;
    border-bottom: none !important;
    >span {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    span::after {
      content: " ";
      width: 1px;
      height: 15px;
      background: var(--vc-menu-split-color);
    }
    span:last-child::after {
      display: none;
    }
    >.el-menu-item {
      padding: 0;
    }
    .el-menu-item {
      width: var(--vc-menu-width, unset);
      justify-content: center;
    }
    .el-sub-menu__title {
      padding: 0 var(--el-menu-base-level-padding)!important;
      justify-content: center;
    }
    .el-sub-menu {
      width: var(--vc-menu-width, unset);
      justify-content: center;
    }
    .el-menu-item.is-active {
      border-bottom: unset!important;
    }
    .first-menu > div {
      color: inherit;
    }
    .el-sub-menu__icon-arrow {
      display: none !important;
    }
  }
}
</style>